<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="toLogin()">
				<view class="back-icon"></view>
			</view>
			<text class="title">主页</text>
			<view class="settings-btn">
				<text class="settings-dot"></text>
				<text class="settings-dot"></text>
				<text class="settings-dot"></text>
				<view class="settings-circle"></view>
			</view>
		</view>
		
		<!-- 商店信息 -->
		<view class="shop-info">
			<view class="shop-avatar" @click="toInfor()">
				<image src="/static/dm.png" mode="aspectFill"></image>
			</view>
			<text class="shop-name">大美汽修厂，欢迎您</text>
		</view>
		
		<!-- 核销功能区 -->
		<view class="verify-area">
			<view class="verify-item" @click="toCheckImg()">
				<view class="verify-icon">
					<view class="scan-icon"></view>
				</view>
				<text class="verify-text">扫码核销</text>
			</view>
			<view class="divider"></view>
			<view class="verify-item" @click="toCheckCode()">
				<view class="verify-icon">
					<view class="input-icon"></view>
				</view>
				<text class="verify-text">输入核销码</text>
			</view>
		</view>
		
		<!-- 功能菜单区 -->
		<view class="function-menu">
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowOne" :index="index" :key="index" @click="navigateTo1(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
			
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowTwo" :index="index" :key="index" @click="navigateTo2(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
			
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowThere" :index="index" :key="index" @click="navigateTo3(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 最新通知区 -->
		<view class="notification-area">
			<view class="notification-header">
				<view class="notification-title">
					<text class="iconfont icon-bell notification-icon-bell"></text>
					<text>最新通知</text>
				</view>
				<view class="notification-more" @click="viewAllNotifications">
					<text>今日需上门取车任务共{{ notificationList.length }}单</text>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<!-- 通知列表 -->
			<view class="notification-list">
				<view class="notification-item" v-for="(item, index) in notificationList" :key="index">
					<text class="customer-name">{{ item.customer }}</text>
					<text class="service-time">{{ item.time }}</text>
				</view>
			</view>
		</view>
		<NotificationChecker />
	</view>
</template>

	<script setup>
		import { ref } from 'vue';
		import NotificationChecker from './components/NotificationChecker.vue';
		import { onLoad, onUnload } from '@dcloudio/uni-app'
		
		const ws = ref(null);
		const notificationList = ref([
			{ customer: '新订单通知', time: '2022-03-10 上午11:09' },
			{ customer: '新订单通知', time: '2022-03-10 上午11:09' },
			{ customer: '新订单通知', time: '2022-03-10 上午11:09' },
			{ customer: '新订单通知', time: '2022-03-10 上午11:09' },
			{ customer: '新订单通知', time: '2022-03-10 上午11:09' }
		]);
		
		
		onLoad(() => {
			console.log('页面加载开始');
			
			// 建立WebSocket连接
			const merchantId = uni.getStorageSync('merchant').id;
			console.log('商家ID:', merchantId);
			
			// 先设置消息监听器
			uni.onSocketMessage((res) => {
				console.log('收到原始消息:', res);
				console.log('消息内容:', res.data);
				try {
					// 尝试解析消息
					const message = JSON.parse(res.data);
					console.log('解析后的消息:', message);
					
					// 处理新订单消息
					if (message.type === 'NEW_ORDER') {
						// 添加新通知到列表开头
						notificationList.value.unshift({
							customer: '新订单',
							service: message.message || '新订单通知',
							time: new Date().toLocaleString()
						});
						console.log(notificationList.value)
						// 显示提示
						uni.showToast({
							title: '收到新订单通知',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('解析消息失败:', error);
					console.log('原始消息数据:', res.data);
				}
			});
			
			console.log('消息监听器已设置');
			
			// 关闭之前的连接（如果有）
			uni.closeSocket();
			
			// 然后建立连接
			ws.value = uni.connectSocket({
				url: `ws://localhost:9407/myws/${merchantId}`,
				complete: () => {
					console.log('WebSocket连接完成');
				},
				success: () => {
					console.log('WebSocket连接成功，连接ID:', merchantId);
				},
				fail: (error) => {
					console.error('WebSocket连接失败:', error);
				}
			});
			
			// 监听连接打开
			uni.onSocketOpen(() => {
				console.log('WebSocket连接已打开，连接ID:', merchantId);
			});

			// 监听连接关闭
			uni.onSocketClose(() => {
				console.log('WebSocket连接已关闭，连接ID:', merchantId);
			});

			// 监听连接错误
			uni.onSocketError((error) => {
				console.error('WebSocket连接错误:', error);
			});
			
			console.log('页面加载完成');
		});
		
		// 页面卸载时关闭连接
		onUnload(() => {
			if (ws.value) {
				uni.closeSocket();
			}
		});
		
		function toLogin(){
			uni.redirectTo({
				url:'/pages/login/login'
			})
		}
		
		function toInfor(){
			uni.navigateTo({
				url: '/pages/index/storeInfor/storeInfor'
			})
		}
		
		
		function toCheckImg(){
			uni.navigateTo({
				url: '/pages/index/check/check'
			})
		}
		
		function toCheckCode(){
			uni.navigateTo({
				url: '/pages/index/checkCode/checkCode'
			})
		}
		
		
		const rowOne = ref([
			{
				name:'经营统计',
				image:'/static/tj.png',
				class:'function-icon blue'
			},
			{
				name:'核销记录',
				image:'/static/hxjl.png',
				class:'function-icon orange'
			},
			{
				name:'收支明细',
				image:'/static/sz.png',
				class:'function-icon purple'
			},
			{
				name:'订单管理',
				image:'/static/dd.png',
				class:'function-icon yellow'
			},
		])
		
		const rowTwo = ref([
			{
				name:'卡券管理',
				image:'/static/kq.png',
				class:'function-icon blue-light'
			},
			{
				name:'维修任务',
				image:'/static/wx.png',
				class:'function-icon green'
			},
			{
				name:'评价管理',
				image:'/static/pj.png',
				class:'function-icon pink'
			},
			{
				name:'商户资料',
				image:'/static/therebook.png',
				class:'function-icon cyan'
			},
		])
		
		const rowThere = ref([
			{
				name:'活动发布',
				image:'/static/hd.png',
				class:'function-icon orange-light'
			},
			{
				name:'立即救援',
				image:'/static/jiuyuan.png',
				class:'function-icon orange-light'
			},
			{
				name:'',
				image:'',
				class:''
			},
			{
				name:'',
				image:'',
				class:''
			},
		])
		
		
		// 页面导航
		const navigateTo1 = (pageNum) => {
			if(pageNum==0){
				uni.showToast({
					title: `正在前往经营统计页面`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/opst/opst'
				})
			}else if(pageNum==1){
				uni.showToast({
					title: `正在前往核销记录页面`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/checkLog/checkLog'
				})
			}else if(pageNum==2){
				uni.showToast({
					title: `正在前往收支明细页面`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/shouzhimingxi/shouzhimingxi'
				})
			}else if(pageNum==3){
				uni.showToast({
					title: `正在前往订单管理页面`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/dingdanguanli/dingdanguanli'
				})
			}
			
		}
		
		const navigateTo2 = (pageNum) => {
			if(pageNum==0){
				uni.showToast({
					title: `正在前往卡券管理`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/kaquan/kaquan'
				})
			}else if(pageNum==1){
				uni.showToast({
					title: `正在前往维修任务`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/weixiurenwu/weixiurenwu'
				})
			}else if(pageNum==2){
				uni.showToast({
					title: `正在前往评价管理`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/pingjia/pingjia'
				})
			}else if(pageNum==3){
				uni.showToast({
					title: `正在前往商户资料`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/storeInfor/storeInfor'
				})
			}
		}
		
		const navigateTo3 = (pageNum) => {
			if(pageNum==0){
				uni.showToast({
					title: `正在前往活动发布`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/huodong/huodong'
				})
			}else if(pageNum==1){
				uni.showToast({
					title: `正在前往立即救援`,
					icon: 'none'
				});
				uni.navigateTo({
					url:'/pages/index/lijijiuyuan/lijijiuyuan'
				})
			}
		}
		
		
		// 查看所有通知
		const viewAllNotifications = () => {
			uni.navigateTo({
				url: '/pages/index/dingdanguanli/dingdanguanli'
			});
		}
</script>

<style>
	@import "/static/customicons.css";
	@import "/common/app.css";
	
	/* 容器样式 */
	.container {
		padding: 0;
		font-size: 14px;
		line-height: 24px;
		background-color: #f5f5f5;
	}
	
	/* 顶部导航栏 */
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 44px;
		background-color: #2196F3;
		color: #ffffff;
		padding: 0 15px;
	}
	
	.back-btn{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	
	.back-icon {
		width: 30px;
		height: 30px;
		/* position: relative; */
	}
	
	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 50rpx;
		left: 27rpx;
		transform: translate(-50%, -50%);
	}
	
	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 40rpx;
		left: 10rpx;
	}
	
	.title {
		margin-top: 20px;
		font-size: 24px;
		font-weight: bold;
		margin-left: -50rpx;
	}
	
	.settings-btn {
		margin-top: 20px;
		position: absolute;
		right: 15px;
		display: flex;
		align-items: center;
	}
	
	.settings-dot {
		width: 4px;
		height: 4px;
		background-color: #ffffff;
		border-radius: 50%;
		margin: 0 2px;
	}
	
	.settings-circle {
		width: 20px;
		height: 20px;
		border: 2px solid #ffffff;
		border-radius: 50%;
		margin-left: 5px;
	}
	
	/* 商店信息 */
	.shop-info {
		margin-top: -50px;
		width: 100%;
		height: 120px;
		display: flex;
		align-items: center;
		padding: 20px 15px;
		background-color: #2196F3;
		color: #ffffff;
	}
	
	.shop-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		background-color: #ffffff;
		margin-right: 15px;
	}
	
	.shop-avatar image {
		width: 100%;
		height: 100%;
	}
	
	.shop-name {
		font-size: 18px;
		font-weight: bold;
	}
	
	/* 核销功能区 */
	.verify-area {
		
		display: flex;
		margin:-40px  15px 0 15px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}
	
	.verify-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
	}
	
	.verify-icon {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
	}
	
	.scan-icon {
		width: 30px;
		height: 30px;
		border: 2px solid #2196F3;
		position: relative;
	}
	
	.scan-icon::before {
		content: "";
		position: absolute;
		width: 15px;
		height: 2px;
		background-color: #2196F3;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.scan-icon::after {
		content: "";
		position: absolute;
		width: 2px;
		height: 15px;
		background-color: #2196F3;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.input-icon {
		width: 30px;
		height: 30px;
		position: relative;
	}
	
	.input-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #2196F3;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.input-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-right: 2px solid #2196F3;
		border-top: 2px solid #2196F3;
		transform: rotate(45deg);
		top: 53%;
		left: 40%;
	}
	
	.verify-text {
		font-size: 14px;
		color: #333;
	}
	
	.divider {
		width: 1px;
		background-color: #eee;
	}
	
	/* 功能菜单区 */
	.function-menu {
		margin: 15px;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}
	
	.function-row {
		display: flex;
		margin-bottom: 20px;
	}
	
	.function-row:last-child {
		margin-bottom: 0;
	}
	
	.function-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.function-icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
		position: relative;
	}
	
	.blue { background-color: #03A9F4; }
	.orange { background-color: #FF9800; }
	.purple { background-color: #9C27B0; }
	.yellow { background-color: #FFC107; }
	.blue-light { background-color: #00BCD4; }
	.green { background-color: #4CAF50; }
	.pink { background-color: #FF4081; }
	.cyan { background-color: #00BCD4; }
	.orange-light { background-color: #FF9800; }
	
	.badge {
		position: relative;
	}
	
	.badge-number {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 10px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		border-radius: 8px;
	}
	
	.function-text {
		font-size: 14px;
		color: #333;
	}
	
	/* 图标样式 - 使用iconfont */
	.iconfont {
		font-family: "customicons"; /* 项目使用的字体名称 */
		font-size: 24px;
		color: #ffffff;
	}
	
	.notification-icon-bell {
		color: #2196F3;
		margin-right: 5px;
	}
	
	/* 最新通知区 */
	.notification-area {
		margin: 15px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	.notification-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}
	
	.notification-title {
		display: flex;
		align-items: center;
		color: #333;
		font-weight: bold;
	}
	
	.notification-more {
		display: flex;
		align-items: center;
		color: #ff5722;
		font-size: 12px;
	}
	
	.arrow-icon {
		margin-left: 5px;
		font-size: 16px;
	}
	
	.notification-list {
		padding: 0 10px	;
		weight: 100vw
	}
	
	.notification-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}
	
	.notification-item:last-child {
		border-bottom: none;
	}
	
	.customer-name {
		width: 80px;
		color: #333;
	}
	
	.service-name {
		flex: 1;
		color: #666;
	}
	
	.service-time {
		width: 250px;
		text-align: right;
		color: #999;
	}
	page {
	  font-size: 16px;
	}
</style>
